<template>
	<view class="vip-component">
		<text class="h1">
			<slot name="h1">默认</slot>
		</text>
		<text class="h2">
			<slot name="h2">默认</slot>
		</text>
		<view class="h3">
			<slot name="h3">默认</slot>
		</view>
		<view class="card-content" :style="{backgroundImage: bgi}">
			<view class="card-text" :style="{color: fc}">
				<text class="card-title">
					<slot name="title">默认</slot>
				</text>
				<text class="desc">
					<slot name="desc1">默认</slot>
				</text>
				<text class="desc">
					<slot name="desc2">默认</slot>
				</text>
				<text class="price">¥ <text class="big-price" ><slot name="price">默认</slot></text>起</text>
			</view>
			<view class="card-img">
				<image :src='img'></image>
			</view>
			<view class="vip-details">
				<text>查看详情</text>
				<view class="circle">
					<uv-icon name="arrow-right" color="#f15d42" size="8"></uv-icon>
				</view>
			</view>
		</view>
		
		<view v-show="bgi2" class="card-content" :style="{backgroundImage: bgi2}">
			<view class="card-text" :style="{color: fc2}">
				<text class="card-title">
					<slot name="title2">默认</slot>
				</text>
				<text class="desc">
					<slot name="desc3">默认</slot>
				</text>
				<text class="desc">
					<slot name="desc4">默认</slot>
				</text>
				<text class="price">¥ <text class="big-price">
					<slot name="price2">默认</slot></text>起</text>
			</view>
			<view class="card-img">
				<image :src='img2'></image>
			</view>
			<view class="vip-details">
				<text>查看详情</text>
				<view class="circle">
					<uv-icon name="arrow-right" color="#f15d42" size="8"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(['bgi','fc','img','bgi2','img2','fc2'])
</script>

<style lang="scss" scoped>
	.vip-component{
		background-color: #fff;
		border-radius: 16rpx;
		width: 100%;
		padding: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.h1{
			font-size: 38rpx;
			font-weight: bold;
			color: #000;
			position: relative;
			z-index: 2;
			letter-spacing: 2rpx;
		}
		.h2{
			font-size: 24rpx;
			color: #505050;
		}
		.h3{
			color: #E6ECFD;
			font-weight: bold;
			font-size: 42rpx;
			position: absolute;
			white-space: nowrap;
			top: 6rpx;
			left: 50%;
			z-index: 1;
			letter-spacing: 2rpx;
			transform: translateX(-50%);
		}
		.card-content{
			position: relative;
			width: 654rpx;
			margin: 30rpx 0;
			border-radius: 16rpx;
			overflow: hidden;
			padding: 30rpx;
			.card-text{
				display: flex;
				flex-direction: column;
				.card-title{
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}
				.desc{
					font-size: 24rpx
				}
				.price{
					margin: 20rpx 0 60rpx;
					font-size: 24rpx;
					text{
						font-size: 48rpx;
						font-family: 'Arial Black', 'Arial Normal', 'Arial', sans-serif;
						font-weight: bold;
					}
				}
			}
			.card-img{
				position: absolute;
				bottom: 60rpx;
				right: 0;
				image{
					width: 294rpx;
					height: 220rpx;
				}
				
			}
			.vip-details{
				width: 100%;
				color: white;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				background-color: #f15e43;
				align-items: center;
				justify-content: center;
				height: 72rpx;
				.circle{
					display: flex;
					margin-left: 10rpx;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					width: 20rpx;
					background-color: #fff;
					height: 20rpx;
				}
			}
		}
	}
</style>